<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" >
     class Text extends React.Component {
            constructor(props) {
                super(props);
            }

            // 删除
            deletData = (id) => {
                let index = this.props.textBox.findIndex(e => {
                    return e[this.props.contId] == id
                })
                this.props.textBox.splice(index,1)
                this.props.saveData(this.props.textBox)
            }
            
            render() {
                return (
                    <ul id="textBox">
                        {
                            this.props.textBox.map(i => {
                                return <li key={i.id}>{i.data} <button onClick={(e) => this.deletData(i.id, e)}>删除</button></li>
                            })
                        }
                    </ul>
                )
            }
        }
        
        class App extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    textarea: '',
                    jsonKey: 'react-demo6',
                    contId: 'id',
                    textBox: [],
                }
            }
            componentDidMount() {
                this.readData()
            }
            // 取值
            readData = (props) => {
                let localJson = localStorage.getItem(this.state.jsonKey)
                if (localJson !== null && localJson.length > 0) {
                    this.setState({ textBox: JSON.parse(localJson) })
                }else{
                 const json = [
                     {
                         id: 1,
                         data: '文章很好!'
                     },
                     {
                         id: 2,
                         data: '哈哈哈哈哈'
                     },
                 ]
                 let jsonData = JSON.stringify(json)
                 localStorage.setItem('react-demo6', jsonData)
                }
            }
            // 存值
            saveData = (arrData) => {
                let localJson = JSON.stringify(arrData)
                localStorage.setItem(this.state.jsonKey, localJson)
                this.setState({ textBox: JSON.parse(localJson) })
            }
            // 新增
            addData = (data) => {
                let arr = this.state.textBox
                let newObj = {
                    "data": this.state.textarea
                }
                // 3.自动生成主键id
                let newId = arr.length > 0 ? arr[arr.length - 1][this.state.contId] + 1 : 1
                newObj[this.state.contId] = newId
                // 4.将对象增加到数组中
                arr.push(newObj)
                // 5.保存新的数组
                this.saveData(arr)
                this.setState({ textarea: '' })
            }
            handleChange = (event) =>{
                 this.setState({textarea: event.target.value});
            }
            render() {
                return (
                    <React.Fragment>
                        <h3>内容</h3>
                        <p>使用react完成留言板案例</p>
                        <p>作者：111</p>
                        <h3>评论</h3>
                        <Text saveData={this.saveData} textBox={this.state.textBox} contId={this.state.contId} />
                        <hr />
                        <h3>发表评论</h3>
                        <textarea value={this.state.textarea} onChange={this.handleChange}  name="textarea" cols="30" rows="10"></textarea>
                        <button  onClick={this.addData}>发表评论</button>
                    </React.Fragment>
                )
            }
        }

        ReactDOM.render(
            <App />,
            document.getElementById('root')
        )

/*
留言表
1渲染列表(列表渲染)      
    1.1在sate中初始化  map渲染 添加key唯一 
2没有评论时 数据渲染暂无(条件渲染)
    2.1 判断列表数据长度==0 加判断
3获取评价信息 包括评论人和评论内容(受控组件)
    3.1
4发表评论，更新评论列表(setState)
*/
</script>